<template>
  <div class="approval-project">
    <Card>
      <filter-board
        @on-screen="screenCondition"
        ></filter-board>
      <Table
        class="business-tmp-table"
        :columns="tableColumns"
        :data="tableData"
        :no-data-text="noData"
        ></Table>

      <div class="page-box">
        <Select
          @on-change="getTableData"
          v-model="pageSize"
          class="page-box-size">
          <Option v-for="item in pageSizeList" :key="item" :value="item" :label="`${item}条/页`">
            {{item}}条
          </Option>
        </Select>
        <Page
          show-elevator
          show-total
          :current="page"
          :total="pageTotal"
          :page-size="pageSize"
          class="page-box-page"
          @on-change="(number) => resetTableData(number)"></Page>
      </div>
    </Card>
  </div>
</template>

<script>
import filterBoard from '../components/filter-board'
export default {
  name: 'approval_list',
  data () {
    return {
      tableColumns: [],
      tableData: [],
      noData: '加载中...',
      selectList: [], // 表格选中行内容

      // 分页相关
      page: 1,
      pageSize: 40,
      pageTotal: 0,
      pageSizeList: [10, 20, 30, 40]
    }
  },
  components: {
    filterBoard
  },
  computed: {
  },
  methods: {
    /**
     * 筛选按钮事件
     * @param {params} 搜索表格所用参数
      */
    screenCondition (params) {
      console.log('----params', params)
    },
    setTableColumns () {
      this.tableColumns = [{
        key: 'projectName',
        title: '项目名称'
      }, {
        key: 'projectId',
        title: '项目ID'
      }, {
        key: 'businessLine',
        title: '业务线'
      }, {
        key: 'type',
        title: '类型'
      }, {
        key: 'desc',
        title: '描述'
      }, {
        key: 'changeTime',
        title: '修改时间'
      }, {
        key: 'changeUser',
        title: '修改者'
      }, {
        key: 'createUser',
        title: '创建者'
      }, {
        key: 'option',
        title: '操作',
        render: (h, { row }) => {
          const self = this
          return h('a', {
            props: {
              type: 'text'
            },
            on: {
              click () {
                // self.getSingleFeature(params.row.businessSceneId);
                self.toApprovePage(row)
              }
            },
            style: {
              'margin-right': '5px',
              display: 'block'
            }
          }, '审批')
        }
      }]
    },
    getTableData () {
      this.tableData = [{
        projectName: 'test-1',
        projectId: '001',
        businessLine: '现金贷',
        type: '信用风险评估',
        desc: '描述xxx',
        changeTime: '12345678',
        changeUser: 'sicong.wang@haha.com',
        createUser: 'sicong.wang@haha.com',
        status: '未测试'
      }, {
        projectName: 'test-2',
        projectId: '002',
        businessLine: '信用贷',
        type: '信用风险评估',
        desc: '描述xxx',
        changeTime: '12345678',
        changeUser: 'sicong.wang@haha.com',
        createUser: 'sicong.wang@haha.com',
        status: '测试中'
      }]
    },
    resetTableData () {

    },
    // 跳转至审批页
    toApprovePage (row) {
      console.log('---row', row)
    }
  },
  activated () {
  },
  mounted () {
    this.setTableColumns()
    this.getTableData()
  }
}
</script>

<style>

</style>
